<!--  -->
<template>
  <div :class="!isCollapse ? 'sidebar' : 'iconBar'">
    <div class="webName" :style="{width:!isCollapse ? '180px' : '70px'}">
      <span v-if="!isCollapse">{{ userName }}</span>
      <i class="el-icon-share" v-else></i>
    </div>
    <el-menu 
      class="el-menu-vertical-demo"
      @open="handleOpen"
      background-color="#2b2f3a"
      text-color="#f4f4f5"
      :default-active="defaultActive"
      active-text-color="#35bef7"
      @close="handleClose"
      :collapse="isCollapse">
      <el-menu-item-group>
        <el-menu-item index="1008611" style="width: 100%; text-align: center;" @click="toPath('panelIndex','大屏','1008611')">
          <span style="width: 100%; text-align: center;" >首页</span>
        </el-menu-item>
      </el-menu-item-group>
      <el-submenu v-for="(item,index) in userRouterList" :key="index" :index="item.id+''">
        <template slot="title">
          <i :class="item.icon"></i>
          <span slot="title">{{item.name}}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item
            :index="childItem.id+''"
            v-for="(childItem,childIndex) in item.children"
            @click="toPath(childItem)"
            :key="childIndex">{{childItem.name}}</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import storages from '@/until/localStorage';
import crypto from '@/until/crypto'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    isCollapse: {
      type: Boolean,
      default: false
    }
  },
  data() {
  //这里存放数据
    return {
      userName: storages.getItem('userName'),
      userRouterList: JSON.parse(storages.getItem('routerList')),
      tagID: '',
      lastID: '',
    };
  },
  //监听属性 类似于data概念
  computed: {
    defaultActive(){
      return this.$store.state.defaultActive_
    },
    
    topbarArr(){
      let standby;
      if (JSON.parse(storages.getItem('topbarArr')) === null) {
        standby = []
      } else {
        standby = JSON.parse(storages.getItem('topbarArr'))
      }
      return this.$store.state.topBarArr.length === 0 ? standby : this.$store.state.topBarArr
    }
  },
  //监控data中的数据变化
  watch: {
  },
  //方法集合
  methods: {
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    toPath(childItem,val,val2){
      if (val === '大屏') {
        this.$store.commit('setActive',val2+'')
        storages.setItem({
          name: "setActive",
          value: val2+''
        })
        this.$router.push({
          path: '/'+childItem
        })
        for (const element of this.topbarArr) {
          element.ischecked = false
        }
        this.topbarArr[0].ischecked = true
        storages.setItem({
          name: "topbarArr",
          value: JSON.stringify(this.topbarArr)
        })
        this.$store.commit('setTopBar', JSON.stringify(this.topbarArr))
      } else {
        this.$store.commit('setActive',childItem.id+'')
        storages.setItem({
          name: "setActive",
          value: childItem.id+''
        })
        this.tagID = childItem.id+''
        const nullArr = []
        if (childItem.children === undefined) {
          // console.log(1);
        } else {
          for (const item of childItem.children) {
            nullArr.push(item.perms)
          }
          storages.setItem({
            name: "permissionsButtonArr",
            value: JSON.stringify(nullArr)
          })
        }
        this.$router.push({
          path: '/'+childItem.path
        })
        if (this.topbarArr.length === 0) {
          childItem.ischecked = true
          this.topbarArr.push(childItem)
          storages.setItem({
            name: "topbarArr",
            value: JSON.stringify(this.topbarArr)
          })
          this.$store.commit('setTopBar', JSON.stringify(this.topbarArr))
        } else {
          childItem.ischecked = true
          let tag = false
          for (const el of this.topbarArr) {
            el.ischecked = false
            if (el.id === childItem.id) {
              tag = true
            }
          }
          if (!tag) {
            this.topbarArr.push(childItem)
            storages.setItem({
              name: "topbarArr",
              value: JSON.stringify(this.topbarArr)
            })
            this.$store.commit('setTopBar', JSON.stringify(this.topbarArr))
          } else {
            for (const el of this.topbarArr) {
              if (el.id === childItem.id) {
                el.ischecked = true
                storages.setItem({
                  name: "topbarArr",
                  value: JSON.stringify(this.topbarArr)
                })
                this.$store.commit('setTopBar', JSON.stringify(this.topbarArr))
                return
              }
            }
          }
        }
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    
  }
}
</script>
<style lang='scss' scoped>
.webName {
  width: 100%;
  text-align: center;
  height: 40px;
  line-height: 40px;
  color: #f4f4f5;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  background: $config-SideBarBackColor;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 180px;
  min-height: 400px;
  position: relative;
  top: 40px;
}
.el-menu--collapse {
  top: 40px;
}
.sidebar {
  height: 100vh;
  background: $config-SideBarBackColor;
  overflow-y: scroll;
  width: 180px;
  overflow-x: hidden;
  position: relative;
  z-index: 999;
}
.iconBar {
  height: 100vh;
  background: $config-SideBarBackColor;
  overflow-y: scroll;
  width: 70px;
  overflow-x: hidden;
}
.el-menu {
  border-right: none;
}
.el-menu ::v-deep .el-submenu__title {
  height: 45px;
  line-height: 45px;
}
.el-menu-item-group ::v-deep .el-menu-item-group__title {
  padding: 0;
}
.el-menu-item {
  font-size: 12px;
  background-color: $config-theme-color !important;
}

.el-menu-item:hover {
  font-size: 12px;
  background-color: #19191d !important;
}
.sidebar::-webkit-scrollbar { 
  display: none; /* Chrome Safari */
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
.iconBar::-webkit-scrollbar { 
  display: none; /* Chrome Safari */
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
</style>
